<template>
  <div class="page-hero" v-if="model">
    <div class="topbar bg-black py-2 text-white px-3 d-flex ai-center">
      <img src="../assets/logo.png" height="30">
      <div class="px-2 flex-1">
        <span class="text-white">王者荣耀</span>
        <span class="ml-2">攻略战</span>
      </div>
      <router-link to="/" tag="div">更多英雄&gt;</router-link>
    </div>
    <div class="top" :style="{'background-image':`url(${model.banner})`}">
      <div class="info text-white p-3 h-100 d-flex flex-column jc-end">
        <div class="fs-sm">{{model.title}}</div>
        <h2 class="my-2">{{model.name}}</h2>
        <div class="fs-sm">{{model.categories.map(v => v.name).join('/')}}</div>
        <div class="d-flex jc-between pt-2">
          <div class="scores d-flex ai-center pt-2" v-if="model.scores">
            <span>难度</span>
            <span class="badge bg-primary">{{model.scores.difficult}}</span>
            <span>技能</span>
            <span class="badge bg-blue-1">{{model.scores.skills}}</span>
            <span>攻击</span>
            <span class="badge bg-danger">{{model.scores.attack}}</span>
            <span>生存</span>
            <span class="badge bg-grey-2">{{model.scores.survive}}</span>
          </div>
          <router-link to="/" tag="span" class="text-gray fs-sm">皮肤:2&gt;</router-link>
        </div>
      </div>
    </div>
    <div class="body">
      <div class="nav jc-around pt-3 pb-2 bar bgc-white">
        <div class="nav-item" :class="{active:active === 0}"
          @click="$refs.list.swiper.slideTo(0)">
          <div class="nav-link">英雄初识</div>
        </div>
        <div class="nav-item"
        :class="{active:active === 1}"
        @click="$refs.list.swiper.slideTo(1)">
          <div class="nav-link">进阶攻略</div>
        </div>
      </div>
      <div style="touch-action: none;">
        <swiper ref="list" :options="{autoHeight:true}"  @slide-change="()=>active=$refs.list.swiper.realIndex">
          <swiper-slide>
            <div class="d-flex jc-around pt-4 px-3 bgc-white">
              <div v-for="(skill,index) in model.skills" :key="index" 
                class="skillImg" @click="skillActive=index">
                <img :src="skill.icon" class="w-100" style="border-radius:50%">
              </div>
            </div>
            <div v-for="(skill,index) in model.skills" :key="index" class="bgc-white">
              <div class="px-3" v-if="skillActive==index">
                <div class="py-4">
                  <strong class="fs-xl">{{skill.name}}</strong>
                  <span class="pl-4 fs-xs text-dark">(冷却值：{{skill.delay}}&nbsp;消耗：{{skill.cost}})</span>
                </div>
                <div class="text-dark pb-2">
                  <p>{{skill.description}}</p>
                </div>
              </div>
            </div>
            <div class="mt-3 bgc-white px-3">
              <div class="py-4"><strong class="fs-xl">出装推荐</strong></div>
              <div class="pb-3"><span>顺风出装</span></div>
              <div class="d-flex jc-between border-bottom">
                <div v-for="(equi,index) in model.items1" :key="index"  class="equiImg">
                  <img :src="equi.icon" class="w-100" style="border-radius:50%;">
                  <div class="text-center text-ellipsis w-100 py-1">{{equi.name}}</div>
                </div>
              </div>
              <div class="py-3"><span>逆风出装</span></div>
              <div class="d-flex jc-between">
                <div v-for="(equi,index) in model.items2" :key="index"  class="equiImg">
                  <img :src="equi.icon" class="w-100" style="border-radius:50%;">
                  <div class="text-center text-ellipsis w-100 py-1">{{equi.name}}</div>
                </div>
              </div>
            </div>
            <div class="mt-3 bgc-white px-3">
              <div class="py-4"><strong class="fs-xl">英雄关系</strong></div>
              <div class="pb-3"><span>最佳搭档</span></div>
              <div v-for="(partner,index) in model.partners" :key="index" class="d-flex ">
                <div style="width:15%">
                  <img :src="partner.hero.avatar" class="w-100">
                </div>
                <div class="pl-2 pt-2" style="width:80%;">{{partner.description}}</div>
              </div>
            </div>
          </swiper-slide>
          <swiper-slide>
            <div>这边将来放视频</div>
            <div>这边将来放视频</div>
            <div>这边将来放视频</div>
            <div>这边将来放视频</div>
            <div>这边将来放视频</div>
            <div>这边将来放视频</div>
            <div>这边将来放视频</div>
            <div>这边将来放视频</div>
            <div>这边将来放视频</div>
            <div>这边将来放视频</div>
            <div>这边将来放视频</div>
            <div>这边将来放视频</div>
            <div>这边将来放视频</div>
            <div>这边将来放视频</div>
            <div>这边将来放视频</div>
            <div>这边将来放视频</div>
            <div>这边将来放视频</div>
            <div>这边将来放视频</div>
          </swiper-slide>
        </swiper>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    id:{require:true}
  },
  data(){
    return{
      model:null,
      active:0,
      skillActive:0
    }
  },
  methods:{
    async fetch(){
      const res = await this.$http.get(`heroes/${this.id}`)
      this.model = res.data
    }
  },
  created(){
    this.fetch()
  }
}
</script>

<style lang="scss">
@import '../assets/scss/variables';
  .page-hero{
    .top{
      height:50vw;
      background: #fff no-repeat top center;
      background-size: auto 100%; 
    }
    .info{
      background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1));
      .scores{
        .badge{
          display: inline-block;
          margin: 0 0.25rem;
          width: 1rem;
          height: 1rem;
          line-height: 1rem;
          text-align: center;
          border-radius: 50%;
          font-size: 0.6rem;
          border: 1px solid rgba(255,255,255,0.2);
        }
      }
    }
    .body{
      .bar{
        border-bottom: 1px solid $border-color;
      }
      .skillImg{
        width: 16%;
      }
      .equiImg{
        width: 15%;
      }
    }
  }
</style>